import React from 'react';
import {Image, StyleSheet, Text, View} from "react-native";
import {DrawerNavigator, TabBarBottom} from "react-navigation";

import HomeScreen from "./PageImage";
import NearByScreen from "./PageImageItem";
import MineScreen from "./PageImageSource";
import * as Color from "../constant/Color";

const imageMain_En = require('../../../img/ic_main_en.png');
const imageMain_Dis = require('../../../img/ic_main_dis.png');

const DrawerNavigatorConfigs = {
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    lazy: true,
    tabBarOptions: {},

    backBehavior: 'none',                           // 按返回:initialRoute(默认)跳转初始页,none:不跳转

    initialRouteName: 'Home',                       // 默认页面组件
    activeTintColor: Color.colorPrimary,            // 选中文字颜色
    activeBackgroundColor: Color.colorAccentDark,   // 选中背景颜色
    inactiveTintColor: Color.darkGray,              // 未选中文字颜色
    inactiveBackgroundColor: Color.colorAccent,     // 未选中背景颜色
    style: {                                        // 样式

    },
    onItemPress: ((route) => {
        alert('-------');
    }),
};

export default class PageDrawer extends React.Component {

    DrawerRouteConfigs;

    constructor(props) {
        super(props);

        this.state = ({
            name: '消息',
            countMsgUnread: 0,
        });

        this._init();
    }

    _init() {
        this.DrawerRouteConfigs = {
            Home: {
                screen: HomeScreen,
                navigationOptions: ({navigation}) => ({
                    drawerLabel: '首页',
                    drawerIcon: ({focused, tintColor}) => (
                        <Image
                            style={styles.img}
                            source={focused ? imageMain_En : imageMain_Dis}/>
                    ),
                }),
            },
            NearBy: {
                screen: NearByScreen,
                navigationOptions: {
                    drawerLabel: '附近',
                    drawerIcon: ({focused, tintColor}) => (
                        <Image
                            style={styles.img}
                            source={focused ? imageMain_En : imageMain_Dis}/>
                    ),
                },
            },
            Mine: {
                screen: MineScreen,
                navigationOptions: {
                    drawerLabel: ({focused, tintColor}) => (
                        <View style={styles.container}>
                            <Text
                                style={styles.text}>
                                {this.state.countMsgUnread > 0 ? '消息(' + this.state.countMsgUnread + ')' : '消息'}
                            </Text>
                            <Image
                                style={styles.img}
                                source={this.state.countMsgUnread > 0 ? imageMain_En : null}/>
                        </View>

                    ),
                    drawerIcon: ({focused, tintColor}) => (
                        <Image
                            style={styles.img}
                            source={focused ? imageMain_En : imageMain_Dis}/>
                    ),
                },
            },
        };
    }

    render() {
        const Drawer = DrawerNavigator(this.DrawerRouteConfigs, DrawerNavigatorConfigs);

        return (
            <Drawer ref={'drawer'}/>
        );
    }

    componentDidMount() {
        let timer = setTimeout(() => {
                this.setState({
                    countMsgUnread: 3,
                });
                alert('你有新消息,侧拉查看');
                timer && clearTimeout(timer);
            },
            3000
        );
    }
}

const styles = StyleSheet.create({
    img: {
        height: 20,
        width: 20,
        resizeMode: Image.resizeMode.stretch,
    },
    container: {
        height: 20,
        flexDirection: 'row',
    },
    text: {
        height: 20,
    }
});
